<template>
  <ArtTableFullScreen>
    <div id="table-full-screen">
      <!-- 搜索栏 -->
      <ArtSearchBar
        v-model:filter="formFilters"
        :items="formItems"
        @reset="handleReset"
        @search="handleSearch"
        :isExpand="true"
      ></ArtSearchBar>
      <el-card shadow="never" class="art-table-card">
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
        </ArtTableHeader>
        <art-table
          :data="tableData"
          :loading="loading"
          :total="total"
          v-model:page-size="queryParams.size"
          v-model:current-page="queryParams.page"
        >
          <template #default>
            <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />
          </template>
        </art-table>
      </el-card>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { UserService } from '@/api/common/user'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { SearchFormItem } from '@/types/search-form'
  import { ElTag } from 'element-plus'
  import ArtImagePreview from '@/components/image/ArtImagePreview.vue'

  const loading = ref(false)
  const tableData = ref<any>([])
  const queryParams = reactive({
    page: 1,
    size: 10,
    telephone: ''
  })
  const total = ref(0)
  // 列配置
  const columnOptions = [
    // { label: '勾选', type: 'selection' },
    { label: 'ID', prop: 'id' },
    { label: '头像', prop: 'avatar' },
    { label: '姓名', prop: 'nick_name' },
    { label: '性别', prop: 'sex' },
    { label: '年龄', prop: 'age' },
    { label: '身高', prop: 'height' },
    { label: '手机号', prop: 'telephone' }
  ]
  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    // { type: 'index', label: '序号', width: 80, align: 'center' }, // 序号列
    { prop: 'id', label: 'ID', align: 'center', width: 80 },
    {
      prop: 'avatar',
      label: '头像',
      align: 'center',
      formatter: (row: any) => {
        return h(ArtImagePreview, { src: row.avatar })
      }
    },
    { prop: 'nick_name', label: '姓名', align: 'center' },
    {
      prop: 'sex',
      label: '性别',
      align: 'center',
      formatter: (row: any) => {
        return h(ElTag, { type: 'success' }, () => (row.sex === 1 ? '男' : '女'))
      }
    },
    { prop: 'age', label: '年龄', align: 'center' },
    { prop: 'height', label: '身高', align: 'center' },
    { prop: 'telephone', label: '手机号', align: 'center' },
  ])

  // 定义表单搜索初始值
  const initialSearchState = {
    telephone: ''
  }
  // 响应式表单数据
  const formFilters = reactive({ ...initialSearchState })

  // 重置表单
  const handleReset = () => {
    Object.assign(formFilters, { ...initialSearchState })
    queryParams.telephone = ''
    getTableData()
  }

  // 搜索处理
  const handleSearch = () => {
    queryParams.telephone = formFilters.telephone
    getTableData()
  }

  // 表单配置项
  const formItems: SearchFormItem[] = [
    {
      label: '手机号',
      prop: 'telephone',
      type: 'input',
      config: {
        clearable: true
      }
    }
  ]
  onMounted(() => {
    getTableData()
  })
  // 刷新
  const handleRefresh = () => {
    getTableData()
  }
  // 获取列表
  const getTableData = async () => {
    loading.value = true
    const res = await UserService.getUserList(queryParams)
    total.value = res.data.total
    tableData.value = res.data.data
    loading.value = false
  }
</script>
